<template>
	<view class="Afont" style="min-height: 100vh;"
		:style="{background:'url('+Imgbase+'/winter_goodpoor_bgc.png)','background-size':'100%',}">

		<view class="padding-top-80 padding-left-30">
			<image class="w-80 h-80" :src="Imgbase + '/winter_goodpoor_img1.png'" mode="aspectFit" @click="back">
			</image>
		</view>

		<view class="font-50 color1 padding-left-40 padding-top-30">
			赏品一览
		</view>

		<view class="padding-top-50 w100 overhid padding-left-20">
			<view class="w-167 h-230 radius-10  margin-bottom-20 bagitem" style="float: left;position: relative;"
				v-for="(it,idx) in data.goods_list" :key="idx" @click="lookImages(it.adimage,it.goods_name)"
				:style="{background:'url('+Imgbase+'/new_goodpoord_img3.png)','background-size':'100% 100%',}">
				<image class="w100 h-150 radius-10" style="border: 4rpx solid #8A5E51;" :src="it.adimage"
					mode="aspectFill">
				</image>

				<view class="w100 one-line font-20 padding-left-10 padding-right-10">
					{{it.goods_name}}
				</view>

				<view class="w100  padding-left-10 padding-right-10 font-20 padding-top-10">
					数量： {{it.num}}
				</view>
			</view>
		</view>

		<view class="bottom_item w100" style="transition: .3s;overflow: hidden;" :class="btstate?'h-1250':'h-400'">
			<view class="text-center padding-top-15" @click="zhanplay">
				<image class="w-50 h-50" :src="Imgbase + '/new_goods_img'+ [btstate?'1':'2']+ '.png'" mode="aspectFit">
				</image>
			</view>

			<view class="font-30 padding-20 text-center padding-top-150" @click="zhanplay" v-if="open_status == -2">
				<view class="font-weight-500 font-48">
					抱歉
				</view>
				<view class="padding-top-15">
					由于未在指定时间完成，
				</view>
				<view class="padding-top-15">
					该套diy商城流局了
				</view>
			</view>


			<view class="font-30 padding-20 flex-between" @click="zhanplay" v-if="open_status == 1">
				<view class="">
					<view class="font-weight-500 font-42">
						开赏条件
					</view>
					<view class="padding-top-5">
						凑齐{{data.goods_list.length}}张，一起开赏！
					</view>
				</view>

				<view class="fr font-32">
					<text class="font-45 Bfont padding-top-10" style="color: #E60000;">￥{{data.cost}}</text>/赏
				</view>
			</view>

			<view class="font-30 padding-20 flex-between" @click="zhanplay" v-if="open_status == 2">
				<view class="">
					<view class="font-weight-500 font-42">
						开奖时间
					</view>
					<view class="padding-top-5">
						{{$u.timeFormat(data.createtime, 'yyyy-mm-dd hh:MM:ss')}}
					</view>
				</view>
			</view>

			<view class="df jcc font-32 padding-top-2" v-if="open_status == 1">
				<view class="padding-left-15 padding-right-25">
					本套剩余时间:
				</view>
				<view class=" font-weight-500">
					<u-count-down :time="timestamp" @change="onChange">
						<view class="time df alc">
							<view class="time__custom">
								<text
									class="time__custom__item">{{ timeData.hours>9?timeData.hours:'0'+timeData.hours}}</text>
							</view>
							<text class="time__doc padding-left-5 padding-right-5">:</text>
							<view class="time__custom">
								<text
									class="time__custom__item ">{{ timeData.minutes>9?timeData.minutes:'0'+timeData.minutes}}</text>
							</view>
							<text class="time__doc padding-left-5 padding-right-5">:</text>
							<view class="time__custom">
								<text
									class="time__custom__item">{{ timeData.seconds>9?timeData.seconds:'0'+timeData.seconds}}</text>
							</view>
						</view>
					</u-count-down>
				</view>
			</view>

			<view class="padding-left-20 padding-top-40">
				<view class="playitem h-100 radius-12 Bfont fl" v-for="(item,index) in data.join_list" :key="index"
					:class="item.user_id==0?'playitemoff':'playitemon'">

					<view class="padding-left-10 lh-90 w100 h100 text-center" v-if="item.user_id==0"
						@click="open(item.idx)">
						抽这张！
					</view>

					<view class="play_box w100 h100" v-else>
						<view class="play_heng w100">

						</view>
						<view class="df play_one h-70 w100 overhid padding-left-10">
							<view class="">
								<image class="w-70 h-70 radius-35 photo" :src="item.avatar" mode="aspectFill"></image>
							</view>
							<view class="padding-left-5 padding-top-12 w-200">
								<view class="w-100 fff font-18">
									{{item.nickname}}
								</view>
								<view class="w-100 font-16 padding-top-4" style="color: #eee;"
									v-if="item.goods_name !== ''">
									{{item.goods_name}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom_box overhid w100" v-if="btstate == false">
			<view class="w100 h-100 onebox">

			</view>
			<view class="w100 h-130 twobox">

			</view>
		</view>

		<view class="bottom_btn w100">

			<!-- 分享 -->
			<!-- <view class="fenbtn w-400 h-120 margin-auto radius-15" v-if="open_status == 1">
				<button class="w-200 h-145"
					style="display: flex;justify-content: right;overflow: hidden;background-color:transparent;"
					open-type="share">
					<image class="w100 h100" mode="aspectFit" :src="Imgbase + '/new_goodinfdex_img4.png'">
					</image>
				</button>
			</view> -->

			<!-- 记录 -->
			<view class="w-300 h-100 margin-auto" v-if="open_status == 2" @click="openre">
				<image class="w100 h100" mode="aspectFit" :src="Imgbase + '/new_goods_img3.png'">
				</image>
			</view>

		</view>

		<!-- 立即购买  -->
		<u-popup :show="payshow" @close="close" :round="15">
			<view class="w100 h-330 text-center padding-top-50" style="background-color:#FCF4F1;">
				购买数量 1 赏，共计 <text class="font-45 Bfont" style="color: #E60000;">￥{{data.cost}}</text>

				<view class="text-center padding-top-85">
					<image class="w-425 h-72" :src="Imgbase + '/new_goodmall_poor4.png'" mode="aspectFit"
						@click="joinUserPoor()"></image>
				</view>
			</view>
		</u-popup>

		<!-- 中赏记录 -->
		<u-popup :show="recordshow" @close="recordclose" mode="center" :round="20">
			<view class="record radius-20">
				<view class="text-center padding-top-20 font-34 padding-bottom-20">
					中赏记录列表
				</view>

				<scroll-view scroll-y class="w100" scroll-with-animation style="height: 80%;overflow: hidden;">
					<view class="margin-bottom-15 reitem padding-20 df" v-for="(item,index) in data.join_list"
						:key="index">
						<view class="df w100 overhid ">
							<view class="">
								<image class="w-100 h-100 radius-50 photo" :src="item.avatar" mode="aspectFill"></image>
							</view>
							<view class="padding-left-15 padding-top-10">
								<view class=" font-28">
									{{item.nickname}}
								</view>
								<view class=" font-26 padding-top-10" v-if="item.goods_name !== ''">
									{{item.goods_name}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="w-220 margin-auto padding-top-20" @click="recordclose">
					<u-button text="关闭" type="warning"></u-button>
				</view>
			</view>
		</u-popup>

		<!-- 图片展示 -->
		<view class="cu-modal" :class="modalName=='photomodel'?'show':''" @tap="hideModal">
			<view class="cu-dialog" style="width: 90%;height: 800rpx;background-color: #fff;">
				<view class="" style="width: 100%;position: relative;">
					<image :src="photoimg" mode="aspectFill" style="width: 100%;height: 680rpx;"></image>
					<view class="" @click="modalName = null"
						style="position: absolute;width: 50rpx;height: 50rpx;top: 20rpx;right: 25rpx;z-index: 999;">
						<image :src="Imgbase + '/new1_infinite_close.png'" mode="aspectFill"
							style="width: 100%;height: 100%;"></image>
					</view>
				</view>

				<view class="Afont" style="margin-top: 40rpx;text-align: center;font-weight: bold;">
					{{looktitle}}
				</view>
			</view>
		</view>

		<view class="h-550">

		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				id: 0,
				btstate: false,
				payshow: false,
				data: [],
				idx: -1,
				modalName: '',
				looktitle: '',
				photoimg: '',
				timestamp: 0,
				timeData: {},
				open_status: 0,
				recordshow: false
			}
		},
		onLoad(e) {
			this.id = e.id
		},
		onShow() {
			this.userPoorDetail()
			setTimeout(() => {
				this.btstate = true
			}, 1200)
			
			var setm = setInterval(() => {
				this.userPoorDetail()
				var pages = getCurrentPages() // 获取栈实例
				let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
				console.log(currentRoute)
				if (currentRoute != 'pagesA/userplay/detail') {
					clearInterval(setm);
				}
				
				if (this.open_status !== 1) {
					clearInterval(setm);
				}
			}, 1000)
		},
		onShareAppMessage(res) {
			let _this = this;
			return {
				title: '',
				path: '/pagesA/userplay/detail?id=' + _this.id,
				imageUrl: 'https://yzcos.oqzhs.cn/brave/yonglogo.png',
			}
		},
		methods: {
			hideModal(e) {
				this.modalName = ''
			},
			// 图片展示
			lookImages(url, title) {
				this.photoimg = url
				this.looktitle = title
				this.modalName = 'photomodel';
			},
			open(idx) {
				this.idx = idx
				this.payshow = true
			},
			openre() {
				this.recordshow = true
			},
			recordclose() {
				this.recordshow = false
			},
			close() {
				this.payshow = false
			},
			async joinUserPoor() {
				this.userPoorDetail()
				let item = await this.$api.post('Usersys/joinUserPoor', {
					token: uni.getStorageSync('token'),
					idx: this.idx,
					poor_id: this.id,
					pay_type: 1, // 1 微信支付，  2 支付宝
					platform: 'mini'
				})

				if (item.code == '1') {
					this.$refs.uToast.show({
						message: item.msg,
					})
					this.idx = -1
					this.payshow = false
					this.userPoorDetail()
				}
			},
			zhanplay() {
				this.btstate = !this.btstate
			},
			async userPoorDetail() {
				let item = await this.$api.post('Usersys/userPoorDetail', {
					token: uni.getStorageSync('token'),
					id: this.id,
				})
				this.data = item.data.info
				this.open_status = item.data.info.open_status

				// const now = this.data.createtime; 1728697651
				let now = new Date().getTime()
				let to = (this.data.createtime + 86373) * 1000
				const secondsUntilNextDayZero = Math.floor((to - now) / 1000);
				this.timestamp = parseInt(secondsUntilNextDayZero) * 1000
			},
			onChange(e) {
				this.timeData = e
			},
			back() {
				uni.navigateBack()
			},
		},
	}
</script>

<style lang="less" scoped>
	.record {
		width: 600rpx;
		height: 1000rpx;
		background-color: #fff;

		.reitem {
			background-color: #ECC7A0;
			color: #8E4E0D;
		}
	}

	button::after {
		border: none;
	}

	.playitem {
		width: 30%;
		letter-spacing: 4rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;

		.play_box {
			position: relative;

			.play_heng {
				position: absolute;
				height: 60%;
				left: 0;
				top: 20%;
				background-color: rgba(0, 0, 0, .7);
				z-index: 2;
			}

			.play_one {
				position: absolute;
				top: 10rpx;
				z-index: 3;
			}

			.photo {
				border: 2rpx solid #101010;
			}
		}
	}

	.playitem:nth-child(3n) {
		margin-right: 0rpx;
	}

	.playitemoff {
		border: 4rpx solid #101010;
		border-style: dashed;
		background-color: #F6F6F6;
	}

	.playitemon {
		border: 4rpx solid #101010;
		background-color: #FDDE24;
	}

	.bottom_item {
		background-color: #FFBC56;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		z-index: 10;
	}

	.bottom_btn {
		position: fixed;
		bottom: 70rpx;
		left: 0;
		z-index: 12;

		.fenbtn {}
	}

	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 11;

		.onebox {
			background: linear-gradient(to bottom, rgba(255, 188, 85, .3), rgba(255, 188, 85, 1));
		}

		.twobox {
			background-color: #FFBC56;
		}
	}

	.color1 {
		color: #8D4C0B;
	}

	.bagitem {
		margin-right: 15rpx;
	}

	.bagitem:nth-child(4n) {
		margin-right: 0;
	}
</style>